<!DOCTYPE html>
<html lang="en">
<head th:include="cultivateWeb/header :: culHeaderCss"></head>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<body>
<header th:include="cultivateWeb/header :: header"></header>
<style>
    a {
        cursor: pointer
    }
</style>
<div class="layui-container">
    <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > 在线学习</p>
</div>
<section>
    <div class="layui-container">
        <!-- 筛选 -->
        <div class="filter bt50">
            <div class="list-item clearfix">
                <div class="list-title">我的学习</div>
                <ul class="list-ul" id="categoryList">
                </ul>
                <input type="hidden" value="" id="category">
            </div>
        </div>
    </div>
    <!-- 全部课程 -------------------------------------------------------------- -->
    <div class="layui-container bt50">
        <!--<input type="hidden" id="name" th:value="${name}" />-->
        <div class="rmtjkc aa">
            <div class="xianshi">
                <div class="qiehuan active">
                    <ul class="clear" id="course">
                    </ul>
                </div>
                <div id="page" class="page"></div>
            </div>
        </div>
    </div>
</section>
<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer">
</div>
<script type="text/javascript" src="/js/xlPaging.js"></script>
<style>
    .cs_type{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<script>
    $(function () {
        //课程数据
        getCourse(0)
    });

    function getCourse(state) {
        ajaxToken("/jzApi/courses/selMyCourseList", 'GET',
            {
                state: state,
                current: 1,
                number: 16
            }, function (res) {
                if (res.pages == 0) {
                    $("#course").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.records;
                    var course = '';
                    list.forEach(function (item, index) {
                        var b = '';
                        if (item.type == 0) {
                            b = '<span style="color: #FF9500">(证书课程)</span>'
                        } else if(item.type == 1){
                            b = '<span style="color: #569175">(师资培训课程)</span>'
                        } else if(item.type == 2){
                            b = '<span style="color: #569175">(考评员培训课程)</span>'
                        } else if(item.type == 3){
                            b = '<span style="color: #569175">(高级师资培训课程)</span>'
                        } else if(item.type == 4){
                            b = '<span style="color: #569175">(高级考评员培训课程)</span>'
                        }
                        course += '<li>' +
                            '<div style="position: relative;overflow: hidden">' +
                            '<img class="bg-img" src="' + item.thumbnail + '" alt="图片"><div class="bg-black"></div><div class="bg-text">已完成：' + item.process + '</div></div>' +
                            '<div style="padding: 10px">' +
                            '<h1 style="margin-bottom: 10px" class="cs_type">' + item.name + b + '</h1>' +
                            '   <h2 style="text-align: right">' +
                            '       <span style="color: #666">讲师：' + item.teacherName + '</span>' +
                            '   </h2>' +
                            '</div>' +
                            '<div style="margin-top: 10px"><a style="float: left;" href="/cultivate/study/studyInfo?id=' + item.id + '&isTestScores=' + item.isTestScores + '&taskId=&classId=" class="uc-ykt-course-card_btn">开始学习</a>' +
                            '<a style="float: right;" href="/cultivate/study/studyAnswer?id=' + item.id + '" class="uc-ykt-course-card_btn">答题解析</a><div style="clear: both"></div></div>' +
                            '</li>'
                    });
                    $("#course").html(course);
                    page(1, res.pages, state);
                }
            }
        )
    }

    function page(num, tolPages, state) {
        $("#page").paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 10, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 1,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                ajaxToken("/jzApi/courses/selMyCourseList", 'GET',
                    {
                        state: state,
                        current: 1,
                        number: 16
                    }, function (res) {
                        if (res.pages == 0) {
                            $("#course").html('<div class="noData">暂无数据</div>');
                        } else {
                            var list = res.records;
                            var course = '';
                            list.forEach(function (item, index) {
                                var b = '';
                                if (item.type == 0) {
                                    b = '<span style="color: #FF9500">(证书课程)</span>'
                                } else if(item.type == 1){
                                    b = '<span style="color: #569175">(师资培训课程)</span>'
                                } else if(item.type == 2){
                                    b = '<span style="color: #569175">(考评员培训课程)</span>'
                                } else if(item.type == 3){
                                    b = '<span style="color: #569175">(高级师资培训课程)</span>'
                                } else if(item.type == 4){
                                    b = '<span style="color: #569175">(高级考评员培训课程)</span>'
                                }
                                course += '<li>' +
                                    '<div style="position: relative;overflow: hidden">' +
                                    '<img class="bg-img" src="' + item.thumbnail + '" alt="图片"><div class="bg-black"></div><div class="bg-text">已完成：' + item.process + '</div></div>' +
                                    '<div style="padding: 10px">' +
                                    '<h1 style="margin-bottom: 10px" class="cs_type">' + item.name + b + '</h1>' +
                                    '   <h2 style="text-align: right">' +
                                    '       <span style="color: #666">讲师：' + item.teacherName + '</span>' +
                                    '   </h2>' +
                                    '</div>' +
                                    '<div style="margin-top: 10px"><a style="float: left;" class="uc-ykt-course-card_btn">开始学习</a>' +
                                    '<a style="float: right;" class="uc-ykt-course-card_btn">答题解析</a><div style="clear: both"></div></div>' +
                                    '</li>'
                            });
                            $("#course").html(course);
                        }
                    }
                )
            }
        });
    }
</script>

</body>
</html>